<template>
     <div id="app">
    <div class="app-container">
      <div class="header-card">
        <div class="card-header">
          <div class="title-content">
            <div class="title-icon">
              <i class="fas fa-edit"></i>
            </div>
            <div class="title-text">{{ isEdit ? '编辑外出记录信息' : '新增外出记录' }}</div>
          </div>
          
          <div class="action-buttons">
            <button class="action-button cancel-button" @click="goBack">
              <i class="fas fa-times"></i>
              取消
            </button>
            <button class="action-button save-button" @click="submitForm">
              <i class="fas fa-save"></i>
              保存
            </button>
          </div>
        </div>
      </div>
      
      <div class="edit-card">
        <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px" label-position="right">
          <!-- 基本信息 -->
          <div class="form-divider">
            <div class="divider-content">
              <i class="fas fa-info-circle"></i>
              <span>基本信息</span>
            </div>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="关联老人" prop="elderlyId">
                <el-input v-model="formData.elderlyId" placeholder="请输入老人ID">
                  <template #prefix>
                    <i class="fas fa-user"></i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="申请日期" prop="applyTime">
                <el-date-picker
                  v-model="formData.applyTime"
                  type="datetime"
                  placeholder="选择申请日期"
                >
                  <template #prefix>
                    <i class="fas fa-calendar-plus"></i>
                  </template>
                </el-date-picker>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="回归日期" prop="inTime">
                <el-date-picker
                  v-model="formData.inTime"
                  type="datetime"
                  placeholder="选择回归日期"
                >
                  <template #prefix>
                    <i class="fas fa-calendar-check"></i>
                  </template>
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="外出日期" prop="outTime">
                <el-date-picker
                  v-model="formData.outTime"
                  type="datetime"
                  placeholder="选择外出日期"
                >
                  <template #prefix>
                    <i class="fas fa-calendar-day"></i>
                  </template>
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="外出原因" prop="reason">
                <el-input 
                  v-model="formData.reason" 
                  type="textarea"
                  :rows="3"
                  placeholder="请输入外出原因"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <!-- 审批信息 -->
          <div class="form-divider">
            <div class="divider-content">
              <i class="fas fa-file-signature"></i>
              <span>审批信息</span>
            </div>
          </div>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="审批员" prop="approverId">
                <el-input v-model="formData.approverId" placeholder="请输入审批员ID">
                  <template #prefix>
                    <i class="fas fa-user-tie"></i>
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
            
            <el-col :span="12">
              <el-form-item label="审批时间" prop="approveTime">
                <el-date-picker
                  v-model="formData.approveTime"
                  type="datetime"
                  placeholder="选择审批时间"
                >
                  <template #prefix>
                    <i class="fas fa-clock"></i>
                  </template>
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="审批备注" prop="approveRemark">
                <el-input 
                  v-model="formData.approveRemark" 
                  type="textarea"
                  :rows="3"
                  placeholder="请输入审批备注"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-select 
                  v-model="formData.status" 
                  placeholder="请选择状态"
                  clearable
                  class="status-select"
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                    <span class="status-tag" :class="'status-' + item.value">
                      {{ item.label }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { findById, save } from '@/api/outEnter'
  import { ElMessage } from 'element-plus'
  import dayjs from 'dayjs'
  
  const route = useRoute()
  const router = useRouter()
  const formRef = ref()
  
  const statusOptions = ref([
     { label: '申请中', value: 0 },
      { label: '已批准', value: 1 },
      { label: '已拒绝', value: 2 },
      { label: '外出中', value: 3 },
      { label: '已返回', value: 4 }


  // 从API获取实际数据
])


  
  // 表单数据
  const formData = reactive({
 
  })
  


  
  // 是否是编辑模式
  const isEdit = computed(() => route.query.id !== undefined)
  
  // 表单验证规则
  const rules = {
    
  }
  
  // 加载员工数据（编辑模式）
  const loadEmployeeData = async (id) => {
    try {
      const res = await findById(id)
      Object.assign(formData, res.data)
      // 确保positionId正确赋值
      if (res.data.elderly) {
        formData.elderlyId = res.data.elderlyId
      }
      if (res.data.employee) {
        formData.approverId = res.data.approverId
      }
    } catch (error) {
      console.error('加载外出数据失败:', error)
      ElMessage.error('加载外出数据失败')
    }
  }
  
  // 提交表单
  const submitForm = async () => {
    try {
      await formRef.value.validate()
      
      
      if (isEdit.value) {
        await save(formData)
        ElMessage.success('外出信息更新成功')
      } else {
          console.log(formData)
        await save(formData)
        ElMessage.success('外出添加成功')
      }
      
      goBack()
    } catch (error) {
      console.error('保存失败:', error)
      if (!error.response) {
        ElMessage.error('表单验证失败，请检查输入')
      }
    }
  }
  
  // 返回上一页
  const goBack = () => {
    router.go(-1)
  }
  
  onMounted(() => {
    if (isEdit.value) {
      loadEmployeeData(route.query.id)
    } else {
      // 新增时设置默认入职日期为今天
      formData.hireDate = dayjs().format('YYYY-MM-DD')
    }
  
  })
  </script>
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
    }
    
    .app {
      background: linear-gradient(135deg, #f8f9fc 0%, #eef2f7 100%);
      min-height: 100vh;
      padding: 20px;
      color: #2c3e50;
    }
    
    .app-container {
      max-width: 1000px;
      margin: 0 auto;
    }
    
    .header-card {
      background: white;
      border-radius: 18px;
      padding: 25px;
      margin-bottom: 25px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
      position: relative;
      overflow: hidden;
    }
    
    .header-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: linear-gradient(to bottom, #4a90e2, #63b3ed);
      border-radius: 18px 0 0 18px;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #f1f5f9;
    }
    
    .title-content {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .title-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.25);
    }
    
    .title-icon i {
      font-size: 24px;
      color: white;
    }
    
    .title-text {
      font-size: 24px;
      font-weight: 700;
      color: #2c3e50;
      letter-spacing: 0.5px;
    }
    
    .action-buttons {
      display: flex;
      gap: 12px;
    }
    
    .action-button {
      padding: 10px 24px;
      border-radius: 12px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s ease;
      border: none;
      cursor: pointer;
    }
    
    .cancel-button {
      background: #f1f5f9;
      color: #64748b;
    }
    
    .cancel-button:hover {
      background: #e2e8f0;
      transform: translateY(-2px);
    }
    
    .save-button {
      background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
      color: white;
      box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
    }
    
    .save-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(74, 144, 226, 0.4);
    }
    
    .edit-card {
      background: white;
      border-radius: 18px;
      padding: 30px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
      margin-bottom: 30px;
    }
    
    .form-divider {
      margin: 30px 0;
      border-top: 1px solid #e2e8f0;
      position: relative;
      text-align: center;
    }
    
    .divider-content {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: white;
      padding: 0 20px;
      color: #4a90e2;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .el-form {
      padding: 0 15px;
    }
    
    .el-row {
      margin-bottom: 20px;
    }
    
    .el-form-item {
      margin-bottom: 24px;
    }
    
    .el-form-item__label {
      font-weight: 600;
      color: #475569;
      padding-right: 15px;
    }
    
    .el-input, .el-select, .el-date-editor {
      width: 100%;
    }
    
    .el-input__inner, .el-textarea__inner, .el-date-editor .el-input__inner {
      border-radius: 12px !important;
      padding: 12px 15px !important;
      border: 1px solid #e2e8f0;
      transition: all 0.3s ease;
    }
    
    .el-input__inner:focus, .el-textarea__inner:focus, .el-date-editor .el-input__inner:focus {
      border-color: #4a90e2;
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    }
    
    .el-select .el-input__inner {
      padding-right: 35px;
    }
    
    .status-select .el-select__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    
    .status-tag {
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    
    .status-0 { background: #fff0f0; color: #ff6b6b; }
    .status-1 { background: #e8f4ff; color: #3498db; }
    .status-2 { background: #f9f0ff; color: #8e44ad; }
    .status-3 { background: #fff8e6; color: #f39c12; }
    .status-4 { background: #e8f7f0; color: #27ae60; }
    
    .el-date-editor .el-input__prefix {
      left: 10px;
    }
    
    .el-date-editor .el-input__suffix {
      right: 10px;
    }
    
    .el-divider__text {
      background: white;
      padding: 0 15px;
      font-weight: 600;
      color: #4a90e2;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .card-header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
      }
      
      .action-buttons {
        width: 100%;
        justify-content: center;
      }
      
      .title-content {
        justify-content: center;
      }
      
      .el-row {
        flex-direction: column;
      }
      
      .el-col {
        width: 100%;
        margin-bottom: 15px;
      }
    }
  </style>